<template>
    <el-table
        :data="companies"
        border
        style="width: 100%"
        class="content"
        :fit="true"
        :stripe="true"
        :row-key="getRowKey"
    >
        <el-table-column prop="percentage" label="仓位" align="center" min-width="72">
            <template #default="{row:company}">
                <span v-if="company.shares">{{ convertPercentage(company?.percentage) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" min-width="181"> </el-table-column>
        <el-table-column prop="marketValue" label="当前市值(亿)" align="center" min-width="121">
            <template #default="{row:company}">
                <span :class="marketValueClass(company)">{{ convertValue(company?.marketValue) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="buyValue" label="年内买点(亿)" align="center" min-width="121"> </el-table-column>
        <el-table-column prop="sellValue" label="年内卖点(亿)" align="center" min-width="121"> </el-table-column>
        <el-table-column prop="estimatedValue" label="三年后估值(亿)" align="center" min-width="121"> </el-table-column>
        <el-table-column prop="increase" label="年内涨幅" align="center" min-width="121">
            <template #default="{row:company}">
                <span v-if="company.price">{{ convertPercentage(company?.increase) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="141">
            <template #default="{row:company}">
                <el-button size="mini" @click="modifyCompany(company)">编辑</el-button>
                <el-button size="mini" type="danger" @click="deleteCompany(company)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <EditCompany v-model:visible="show" :isAdd="isAdd" :editCompany="current" @updateCompany="updateCompany" />
</template>

<script lang="ts">
import { CompanyHandler } from '@/types/tracker';
import { Company } from '@/types/company';
import { useCompanyList } from '@/components/utils/useCompanyList';

import {
    defineComponent, onMounted, Prop, PropType, reactive, ref,
} from 'vue';
import Sortable from 'sortablejs';
import EditCompany from './Company.vue';

export default defineComponent({
    props: {
        companies: {
            type: Array as PropType<Company[]>,
            required: true,
        },
        handlers: {
            type: Object as PropType<CompanyHandler>,
            required: true,
        },
    },
    components: {
        EditCompany,
    },
    setup(props) {
        const convertPercentage = (value: number) => {
            if (value) {
                return `${value.toFixed(2)}%`;
            }
            return '0%';
        };
        const convertValue = (value: number) => {
            if (value && !Number.isNaN(value)) {
                return value.toFixed(2);
            }
            return '';
        };

        const marketValueClass = (company: Company) => {
            const classes = ['market-value'];
            if (company.marketValue && company.buyValue && company.marketValue < company.buyValue) {
                classes.push('low');
            }
            if (company.marketValue && company.sellValue && company.marketValue > company.sellValue) {
                classes.push('high');
            }

            return classes;
        };
        const drag = () => {
            // 首先获取需要拖拽的dom节点
            const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];
            Sortable.create(el1, {
                disabled: false, // 是否开启拖拽
                ghostClass: 'sortable-ghost', // 拖拽样式
                animation: 150, // 拖拽延时，效果更好看
                group: {
                    // 是否开启跨表拖拽
                    pull: false,
                    put: false,
                },
                onEnd: ({ oldIndex, newIndex }: any) => {
                    props.handlers.dragCompany(oldIndex, newIndex);
                },
            });
        };
        const getRowKey = (row: Company) => row.code;
        onMounted(() => {
            drag();
        });
        return {
            ...useCompanyList(props.handlers),
            convertPercentage,
            convertValue,
            marketValueClass,
            getRowKey,
        };
    },
});
</script>

<style lang="scss" scoped>
.content {
    margin: 10px 0;
}
.sortable-ghost {
    opacity: 0.4;
    background-color: #f4e2c9;
}
.market-value {
    &.low {
        color: green;
    }
    &.high {
        color:red;
    }
}
</style>
